<!--
 * @FileDescription 工具栏
 * @Author lz
 * @Date 20230223 16:08:06
 * @LastEditors lz
 * @LastEditTime 20230223 16:08:06
-->
<template>
    <div class="toolbar_wp" v-if="state.show">
        <div class="tit">工具栏</div>
        <img src="/structure/DecorativeLine_r.png" class="line">
        <img src="/structure/develop.png" class="develop" @click="show()">
        <div class="ToolName">
            100cm钢直尺
        </div>
        <!-- <img src="/structure/chizi.png" class="chizi"> -->
        <div class="changing-over">
            <img src="/structure/thePrevious.png" class="thePrevious">
            <div class="inp_Box">
                90°
            </div>
            <img src="/structure/next.png" class="next">
        </div>
        <div class="retrieve">
            <img src="/structure/retrieve.png" class="retrieve_ico">
            回收
        </div>
    </div>
    <div class="StowedState" v-if="!state.show" @click="show()">
        <img src="/structure/ExpandArrow_r.png" class="expArr">
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
const state = reactive({
    show: true,
});
function show() {
    state.show = !state.show
}
</script>

<style scoped>
.toolbar_wp {
    position: absolute;
    right: 0;
    top: 758px;
    width: 290px;
    height: 251px;
    background-image: url('/structure/gjl_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.line {
    width: 272px;
    height: 28px;
    position: absolute;
    right: 8px;
    top: 32px;
}

.tit {
    text-align: right;
    font-size: 22px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #ffffff;
    padding-right: 38px;
    padding-top: 12px;
}

.develop {
    position: absolute;
    left: 4px;
    top: 14px;
    width: 27px;
    height: 32px;
}

.ToolName {
    margin-top: 44px;
    text-align: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
}

.chizi {
    width: 237px;
    margin-left: 27px;
}

.retrieve {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #00E7FF;
    margin-left: 209px;
}

.inp_Box {
    width: 59px;
    height: 33px;
    background-image: url('/structure/numericalValue.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 19px 7px;
    text-align: center;
    line-height: 33px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
}

.changing-over {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.thePrevious {
    width: 14px;
    height: 19px;
}

.next {
    width: 14px;
    height: 19px;
}

.retrieve_ico {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}
.StowedState {
    position: absolute;
    right: 0;
    top: 765px;
    width: 52px;
    height: 52px;
    background-image: url('/structure/stowedState_r_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.expArr{
    width: 27px;
    height: 32px;
    margin-top: 10px;
    margin-left: 13px;
}
</style>